<template>
  <quill-editor
    class="editor"
    ref="quillTextEditor"
    v-model="contentCode"
    :content="content"
    :options="options"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  ></quill-editor>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";

export default {
  name: "editor",
  data() {
    return {
      contentCode: "",
      options: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ direction: "rtl" }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ font: [] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ["clean"],
            ["link", "image", "video"]
          ],
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      }
    };
  },
  components: {
    quillEditor
  },
  props: {
    content: {
      required: true,
      type: String,
      default: "输入内容。。。"
    }
  },
  methods: {
    onEditorBlur(editor) {
      console.log("editor blur!", editor);
    },
    onEditorFocus(editor) {
      console.log("editor focus!", editor);
    },
    onEditorReady(editor) {
      console.log("editor ready!", editor);
    }
  },
  computed: {
    editor() {
      return this.$refs.quillTextEditor.quill;
    }
  },
  mounted() {
    console.log("init editor", this.editor);
  },
  watch: {
    contentCode(newContentCode, oldContentCode) {
      this.$emit("contentHandle", newContentCode);
    }
  }
};
</script>

<style scoped lang="stylus">
.editor >>> .ql-container.ql-snow {
  max-height: 300px;
  height: 300px;
}

.editor >>> .ql-snow .ql-picker {
  line-height: 24px;
}
</style>
